<script setup>
// 制造分析(四项指标)
import { ref, computed, onMounted } from 'vue'

// 响应式数据
const apiData = ref({
	orderFulfillment: 0,
	laborProductivity: 0,
	resourceUtilization: 0,
	productionEfficiency: 0,
})

const loading = ref(true)
const errorMessage = ref(null)

// 图表基础配置
const baseChartOption = {
	backgroundColor: 'transparent', // 透明背景以适配深色主题
	series: [
		{
			type: 'gauge',
			center: ['30%', '30%'],
			radius: '35%',
			min: 0,
			max: 50,
			axisTick: { splitNumber: 4 },
			title: { show: true, bottom: '10%', textStyle: { color: 'white' }, offsetCenter: [0, '30%'] },
			detail: { formatter: '{value} 百万', width: '74%', height: 16, borderColor: '#999', borderWidth: 1, borderRadius: 8, textStyle: { color: 'white', fontSize: 16 }, offsetCenter: [0, '70%'] },
			axisLabel: { color: '#999' },
			axisLine: { lineStyle: { color: [[1, '#2f4554']], width: 10 } },
			progress: { show: true, width: 10 },
			pointer: { length: '60%', width: 4, itemStyle: { color: '#FFA500' } },
			data: [{ value: apiData.value.orderFulfillment, name: '订单满足量' }],
		},
		{
			type: 'gauge',
			center: ['70%', '30%'],
			radius: '35%',
			min: 0,
			max: 50,
			axisTick: { splitNumber: 4 },
			title: { show: true, bottom: '10%', textStyle: { color: 'white' }, offsetCenter: [0, '30%'] },
			detail: { formatter: '{value} 台/年', width: '74%', height: 16, borderColor: '#999', borderWidth: 1, borderRadius: 8, textStyle: { color: 'white', fontSize: 16 }, offsetCenter: [0, '70%'] },
			axisLabel: { color: '#999' },
			axisLine: { lineStyle: { color: [[1, '#2f4554']], width: 10 } },
			progress: { show: true, width: 10 },
			pointer: { length: '60%', width: 4 },
			data: [{ value: apiData.value.laborProductivity, name: '劳动生产率' }],
		},
		{
			type: 'gauge',
			center: ['30%', '70%'],
			radius: '35%',
			min: 0,
			max: 2,
			axisTick: { splitNumber: 4 },
			title: { show: true, bottom: '10%', textStyle: { color: 'white' }, offsetCenter: [0, '30%'] },
			detail: { formatter: '{value} %', width: '74%', height: 16, borderColor: '#999', borderWidth: 1, borderRadius: 8, textStyle: { color: 'white', fontSize: 16 }, offsetCenter: [0, '70%'] },
			axisLabel: { color: '#999' },
			axisLine: { lineStyle: { color: [[1, '#2f4554']], width: 10 } },
			progress: { show: true, width: 10 },
			pointer: { length: '60%', width: 4 },
			data: [{ value: apiData.value.resourceUtilization, name: '资源利用率' }],
		},
		{
			type: 'gauge',
			center: ['70%', '70%'],
			radius: '35%',
			min: 0,
			max: 1,
			axisTick: { splitNumber: 4 },
			title: { show: true, bottom: '10%', textStyle: { color: 'white' }, offsetCenter: [0, '30%'] },
			detail: { formatter: '{value} %', width: '74%', height: 16, borderColor: '#999', borderWidth: 1, borderRadius: 8, textStyle: { color: 'white', fontSize: 16 }, offsetCenter: [0, '70%'] },
			axisLabel: { color: '#999' },
			axisLine: { lineStyle: { color: [[1, '#2f4554']], width: 10 } },
			progress: { show: true, width: 10 },
			pointer: { length: '60%', width: 4 },
			data: [{ value: apiData.value.productionEfficiency, name: '生产效率' }],
		},
	],
	grid: { containLabel: true, top: 50, bottom: 50, left: 50, right: 50 },
	animationDuration: 2000,
}

// 动态图表配置
const chartOption = computed(() => ({
	...baseChartOption,
	series: baseChartOption.series.map(series => ({
		...series,
		data: series.data.map(item => ({
			...item,
			value: apiData.value[item.name === '订单满足量' ? 'orderFulfillment' : item.name === '劳动生产率' ? 'laborProductivity' : item.name === '资源利用率' ? 'resourceUtilization' : 'productionEfficiency'],
		})),
	})),
}))

// 数据获取
const fetchManufacturingData = async () => {
	try {
		const response = await fetch('http://localhost/api/ads-manufacturing')
		if (!response.ok) throw new Error(`HTTP错误 ${response.status}`)
		const data = await response.json()

		apiData.value = {
			orderFulfillment: Math.round(data.orderFulfillment / 100000) / 100,
			laborProductivity: (data.laborProductivity / 100).toFixed(2),
			resourceUtilization: data.resourceUtilization,
			productionEfficiency: data.productionEfficiency,
		}

		// 自动调整量程
		baseChartOption.series[2].max = 100 // 资源利用率百分比
		baseChartOption.series[3].max = 100 // 生产效益百分比

		errorMessage.value = null
	} catch (err) {
		errorMessage.value = `数据加载失败: ${err.message}`
		console.error('API请求异常:', err)
	} finally {
		loading.value = false
	}
}

onMounted(() => {
	fetchManufacturingData()
})
</script>

<template>
	<v-chart :option="chartOption" theme="chalk" />
</template>

<style scoped></style>
